<template>
  <Noshop v-if="isShow"></Noshop>
  <div class="detail" v-else-if="!isShow">
    <van-nav-bar left-arrow @click-left="onClickLeft" />
    <div class="header">
      <div class="top">
        <div class="imgBox">
          <img :src="'https://elm.cangdu.org/img/' + shopList.image_path" />
        </div>
        <div class="text">
          <div class="title">{{ shopList.name }}</div>
          <div class="tx">
            <span>商家配送</span>
            <span class="fj">/</span>
            <span>分钟送达</span>
            <span class="fj">/</span>
            <span>配送费&yen;{{ shopList.float_delivery_fee }}</span>
          </div>
          <div class="tc">
            <span>公告：</span>
            <span>{{ shopList.promotion_info }}</span>
          </div>
        </div>
        <van-icon name="arrow" />
      </div>
      <van-tabs v-model:active="active">
        <van-tab title="商品" class="shop">
          <div class="top">
            <div class="menu-left">
              <van-sidebar v-model="active1">
                <van-sidebar-item
                  v-for="(item, index) in shopMenu"
                  :key="index"
                  :title="item.name"
                  @click="onChange(index)"
                >
                </van-sidebar-item>
              </van-sidebar>
            </div>
            <div class="menu-right">
              <ul>
                <li v-for="(item, index) in shopEat.foods" :key="index">
                  <div class="top">
                    <div class="left">
                      <div class="imgBox1">
                        <img
                          :src="'https://elm.cangdu.org/img/' + item.image_path"
                        />
                      </div>
                    </div>
                    <div class="right">
                      <div class="shopTitle">{{ item.name }}</div>
                      <div class="shopTx">
                        <span>{{ item.tips }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="bottom">
                    <div class="pirce">
                      &yen;
                      <span class="price-num">{{
                        item.specfoods[0].price
                      }}</span>
                    </div>
                    <div class="shopCart">
                      <van-stepper
                        v-model="item.specfoods[0].num"
                        min=""
                        theme="round"
                        button-size="22"
                        disable-input
                        @change="getStepper($event, item.specfoods[0])"
                      />
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="bottom-shopCart" v-if="!isShopCart">
            <div class="left">
              <div class="shopCart">
                <van-icon name="shopping-cart" color="#fff" />
              </div>
              <div class="money">
                <div class="price">&yen;0.00</div>
                <div class="Delivery-fees">配送费&yen;5</div>
              </div>
            </div>
            <div class="right">
              还差&yen;{{ shopList.float_minimum_order_amount }}起送
            </div>
          </div>
          <van-popup v-model:show="show" position="bottom">
            <div class="popup-top">
              <div class="popup-top-left">购物车</div>
              <div class="popup-top-right" @click="clearShopCart">
                <van-icon name="delete" />
                清空
              </div>
            </div>
            <ul class="popup-li">
              <li v-for="(item, index) in shopCartList" :key="index">
                <div class="name">{{ item.name }}</div>
                <div class="pirce">&yen;{{ item.price }}</div>
                <div class="srepper">
                  <van-stepper
                    v-model="item.num"
                    min="0"
                    theme="round"
                    button-size="22"
                    disable-input
                    @change="setStepper($event, item)"
                  />
                </div>
              </li>
            </ul>
          </van-popup>
          <div class="bottom-shopCart-active" v-if="isShopCart">
            <div class="left" @click="showPopup">
              <div class="shopCart">
                <van-icon name="shopping-cart" color="#fff" :badge="newNum" />
              </div>
              <div class="money">
                <div class="price">&yen;{{ newPrice }}</div>
                <div class="Delivery-fees">配送费&yen;5</div>
              </div>
            </div>
            <div class="right" @click="goPage('Orderdetail')">去结算</div>
          </div>
        </van-tab>

        <!-- <van-tab title="评价">内容 2</van-tab> -->
      </van-tabs>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import axios from "axios";
import { useRoute } from "vue-router";
import { useRouter } from "vue-router";
import Noshop from "../components/Noshop.vue";

export default defineComponent({
  name: "Detail",
  components: {
    Noshop,
  },
  setup() {
    const isShow = ref(false);
    //步进器
    const count = ref(0);
    //购物车弹窗
    const show = ref(false);
    // let router: any = useRouter();
    //购物车高亮显示
    const isShopCart = ref(false);
    let route: any = useRoute();
    const onClickLeft = () => history.back();
    const active = ref(0);
    const active1 = ref(0);
    //获取商铺详情信息
    //商品分类
    let shopList: any = ref<Array<any>>([]);
    let getShopList: () => void = (): void => {
      axios({
        method: "get",
        url: "https://elm.cangdu.org/shopping/restaurant/" + route.query.id,
      })
        .then((res: any): void => {
          shopList.value = res.data;
          console.log("shopList.value ==> ", shopList.value);
        })
        .catch((err: any): void => {
          console.log("err ==> ", err);
        });
    };
    //获取食品列表
    //食品种类
    let shopMenu: any = ref<Array<any>>([]);
    //食品
    let shopEat: any = ref<Array<any>>([]);
    let getShopMenu: () => void = (): void => {
      axios({
        method: "get",
        url: "https://elm.cangdu.org/shopping/v2/menu",
        params: {
          restaurant_id: route.query.id,
        },
      })
        .then((res: any): void => {
          // console.log("res ==> ", res);
          shopMenu.value = res.data;
          shopEat.value = res.data[0];
          // console.log(shopEat.value.foods.length);

          if (res.data.length <= 0) {
            isShow.value = true;
          } else {
            isShow.value = false;
          }

          // console.log("shopEat.value ==> ", shopEat.value);
          let shopData: any = localStorage.getItem("shopCart");
          if (shopData) {
            shopData = JSON.parse(shopData);
          } else {
            shopData = [];
          }
          for (let z: number = 0; z < shopEat.value.foods.length; z++) {
            shopEat.value.foods[z].specfoods[0].num = "0";
          }
          let num: number = 0;
          let price: number = 0;
          for (let i: number = 0; i < shopData.length; i++) {
            if (shopData[i].shopsId == route.query.id) {
              shopCartList.value = shopData[i].shops;
              if (shopData[i].shops.length > 0) {
                isShopCart.value = true;
              }

              // console.log(shopData[i]);
              for (let j: number = 0; j < shopData[i].shops.length; j++) {
                num += shopData[i].shops[j].num;
                price += shopData[i].shops[j].price;
                for (let z: number = 0; z < shopEat.value.foods.length; z++) {
                  // shopEat.value.foods[z].specfoods[0].num = "0";
                  if (
                    shopEat.value.foods[z].specfoods[0].food_id ==
                    shopData[i].shops[j].id
                  ) {
                    shopEat.value.foods[z].specfoods[0].num =
                      shopData[i].shops[j].num;
                    // console.log(shopEat.value.foods[z].specfoods[0]);
                  }
                }
                // console.log("shopEat.value ==> ", shopEat.value);
              }
            }
          }
          newNum.value = num;
          newPrice.value = price;
          // console.log(num);
        })
        .catch((err: any): void => {
          console.log("err ==> ", err);
        });
    };
    //切换商品数据
    let onChange: (index: number) => void = (index: number): void => {
      if (index == active1.value) {
        return;
      }
      shopEat.value = shopMenu.value[index];
      // console.log(index);
    };
    //购物车价格
    let newPrice: any = ref();
    //购物车数量
    let newNum: any = ref();
    //购物车数据数组
    let shopCartList: any = ref<Array<any>>([]);
    //获取步进器
    let getStepper: (e: number, arr: any) => void = (
      e: number,
      arr: any
    ): void => {
      let shops: any = {
        id: arr.food_id,
        name: arr.name,
        num: e,
        price: arr.price * e,
      };
      let shopData: any = localStorage.getItem("shopCart");
      if (shopData) {
        shopData = JSON.parse(shopData);
      } else {
        shopData = [];
      }
      let price: number = 0;
      let num: number = 0;
      for (let i: number = 0; i < shopData.length; i++) {
        if (shopData[i].shopsId == route.query.id) {
          //购物车高亮显示
          isShopCart.value = true;
          if (shopData[i].shops.length == 0) {
            shopData[i].shops.push(shops);
          }
          if (shopData[i].shops.some((v: any) => v.id == arr.food_id)) {
          } else {
            shopData[i].shops.push(shops);
          }
          for (let j: number = 0; j < shopData[i].shops.length; j++) {
            if (shopData[i].shops[j].id === arr.food_id) {
              shopData[i].shops[j] = shops;
              shopCartList.value = shopData[i].shops;
            }
            //  console.log(shopData[i].shops[j].price);

            price = price + shopData[i].shops[j].price;
            num = num + shopData[i].shops[j].num;
          }
          // console.log(price);

          newPrice.value = price;
          newNum.value = num;

          // console.log(newPrice.value);

          if (shopData[i].shops.some((v: any) => v.num == 0)) {
            let index: number = shopData[i].shops.findIndex(
              (v: any) => v.num == 0
            );
            shopData[i].shops.splice(index, 1);
          }

          if (shopData[i].shops.length == 0) {
            isShopCart.value = false;
          }
        }
      }

      // console.log(shopCartList.value);

      localStorage.setItem("shopCart", JSON.stringify(shopData));
    };
    //点击购物车弹窗
    let showPopup: () => void = (): void => {
      show.value = true;
    };
    //购物车里的步进器
    let setStepper: (n: number, arr: any) => void = (
      n: number,
      arr: any
    ): void => {
      // console.log(n);
      // console.log(arr);
      let shopData: any = localStorage.getItem("shopCart");
      if (shopData) {
        shopData = JSON.parse(shopData);
      } else {
        shopData = [];
      }
      for (let i: number = 0; i < shopData.length; i++) {
        for (let j: number = 0; j < shopData[i].shops.length; j++) {
          if (shopData[i].shops[j].id == arr.id) {
            shopData[i].shops[j].num = n;
          }
          for (let z: number = 0; z < shopEat.value.foods.length; z++) {
            if (
              shopEat.value.foods[z].specfoods[0].food_id ==
              shopData[i].shops[j].id
            ) {
              shopEat.value.foods[z].specfoods[0].num =
                shopData[i].shops[j].num;
            }
          }
        }
        if (shopData[i].shops.some((v: any) => v.num == 0)) {
          let index: number = shopData[i].shops.findIndex(
            (v: any) => v.num == 0
          );
          shopData[i].shops.splice(index, 1);
          shopCartList.value = shopData[i].shops;
          if (shopData[i].shops.length == 0) {
            show.value = false;
          }
        }
      }
      localStorage.setItem("shopCart", JSON.stringify(shopData));
    };
    //清空购物车
    let clearShopCart: () => void = (): void => {
      let shopData: any = localStorage.getItem("shopCart");
      if (shopData) {
        shopData = JSON.parse(shopData);
      } else {
        shopData = [];
      }
      for (let i: number = 0; i < shopData.length; i++) {
        if (shopData[i].shopsId == route.query.id) {
          shopData[i].shops = [];
          shopCartList.value = [];
          for (let z: number = 0; z < shopEat.value.foods.length; z++) {
            shopEat.value.foods[z].specfoods[0].num = 0;
          }
          // isShopCart.value = false;
          show.value = false;
        }
      }
      localStorage.setItem("shopCart", JSON.stringify(shopData));
    };

    let router: any = useRouter();
    //跳转新增地址 页面
    let goPage: (name: string) => void = (name: string): void => {
      router.push({ name, query: { id: route.query.id } });
    };

    onMounted((): void => {
      getShopList();
      getShopMenu();
    });
    return {
      //数据
      shopList,
      active,
      active1,
      shopMenu,
      shopEat,
      count,
      isShopCart,
      shopCartList,
      newPrice,
      newNum,
      show,
      isShow,
      //方法
      onClickLeft,
      onChange,
      getStepper,
      showPopup,
      setStepper,
      clearShopCart,
      goPage,
    };
  },
});
</script>

<style lang="scss" scoped>
.detail {
  ::v-deep .van-nav-bar .van-icon {
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
  }
  .van-nav-bar {
    background-color: #12b9fa;
  }
  .header {
    height: 90px;
    background-color: #12b9fa;
    .top {
      display: flex;
      align-items: center;
      .imgBox {
        width: 68px;
        height: 68px;
        // background-color: red;
        margin-top: 10px;
        margin-left: 10px;
        img {
          width: 100%;
        }
      }
      .text {
        margin-left: 10px;
        .title {
          font-size: 20px;
          font-weight: 700;
          color: #fff;
          width: 100%;
        }
        .tx {
          font-size: 12px;
          color: #ffffff;
          margin-top: 6px;
          .fj {
            margin-left: 5px;
            margin-right: 5px;
          }
        }
        .tc {
          font-size: 12px;
          color: #fff;
          margin-top: 6px;
        }
      }
      .van-icon {
        font-size: 20px;
        color: #fff;
        margin-top: 10px;
        margin-left: 20px;
      }
    }
  }
  .van-tabs {
    margin-top: 10px;
  }
  ::v-deep .van-tabs__content {
    margin-top: 5px;
    border-top: 1px solid #ccc;
  }
  .shop {
    // flex-wrap: wrap;
    .top {
      display: flex;
      .menu-left {
        height: 410px;
        overflow: hidden;
        overflow: scroll;
        width: 80px;
      }
      .menu-left::-webkit-scrollbar {
        display: none;
      }
      .menu-right {
        width: 100%;
        height: 410px;
        overflow: hidden;
        overflow: scroll;
        // background-color: red;
        ul {
          li {
            width: 100%;
            height: 100px;
            border: 1px solid #ccc;
            // background-color: blue;
            .top {
              display: flex;
              margin-top: 10px;
              .left {
                .imgBox1 {
                  width: 47px;
                  height: 47px;
                  margin-left: 10px;
                  img {
                    width: 100%;
                  }
                }
              }
              .right {
                margin-left: 10px;
                line-height: 24px;
                .shopTitle {
                  font-size: 16px;
                  color: #333333;
                  font-weight: 700;
                }
              }
            }
            .bottom {
              display: flex;
              justify-content: space-between;
              margin-top: 10px;
              margin-left: 65px;
              .price-num {
                font-size: 22px;
                color: #ff6600;
              }
              .shopCart {
                margin-right: 10px;
                font-size: 22px;
              }
            }
          }
        }
      }
      .menu-right::-webkit-scrollbar {
        display: none;
      }
    }
  }
  .bottom-shopCart {
    height: 55px;
    background-color: #333333;
    margin-top: 17px;
    display: flex;
    justify-content: space-between;
    .left {
      position: relative;
      .shopCart {
        width: 55px;
        height: 55px;
        background-color: #333333;
        border-radius: 55px;
        position: absolute;
        top: -27px;
        left: 18px;
        text-align: center;
        line-height: 55px;
        font-size: 35px;
        border: 5px solid #444;
      }
      .money {
        margin-left: 100px;
        color: #fff;
        .price {
          font-size: 20px;
          font-weight: 700;
          margin-top: 5px;
          margin-bottom: 10px;
        }
        .Delivery-fees {
        }
      }
    }
    .right {
      width: 117px;
      height: 55px;
      background-color: #535356;
      text-align: center;
      line-height: 55px;
      font-size: 16px;
      color: #ffffff;
      font-weight: 800;
    }
  }
  .bottom-shopCart-active {
    z-index: 10;
    height: 55px;
    background-color: #333333;
    margin-top: 17px;
    display: flex;
    justify-content: space-between;
    .left {
      position: relative;
      .shopCart {
        width: 55px;
        height: 55px;
        background-color: #3190e8;
        border-radius: 55px;
        position: absolute;
        top: -27px;
        left: 18px;
        text-align: center;
        line-height: 55px;
        font-size: 35px;
        border: 5px solid #444;
      }
      .money {
        margin-left: 100px;
        color: #fff;
        .price {
          font-size: 20px;
          font-weight: 700;
          margin-top: 5px;
          margin-bottom: 10px;
        }
        .Delivery-fees {
        }
      }
    }
    .right {
      width: 117px;
      height: 55px;
      background-color: #4cd964;
      text-align: center;
      line-height: 55px;
      font-size: 16px;
      color: #ffffff;
      font-weight: 800;
    }
    ::v-deep .van-badge--top-right {
      top: -8px;
    }
  }
  .popup-top {
    height: 45px;
    background-color: #eceff1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .popup-top-left {
      font-size: 17px;
      color: #666666;
    }
    .popup-top-right {
      font-size: 14px;
      color: #333333;
    }
  }
  .popup-li {
    li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 50px;
      .name {
        width: 193px;
        font-size: 16px;
        color: #666666;
      }
      .pirce {
        font-size: 16px;
        color: #ff6600;
      }
    }
  }
}
</style>